import React from "react";
import './add.css';
import MDEditor from '@uiw/react-md-editor';
import { Form, Input, Button, Switch } from 'antd';

const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
};
const tailLayout = {
    wrapperCol: { offset: 2, span: 22 },
};

export default class Add extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: "**Hello world!!!**", blogs: [], now: {} };
    }
    formRef = React.createRef()
    setValue = (value) => {
        this.setState({
            value: value
        });
    }
    setNow = (i) => {
        this.setState({
            now: this.state.blogs[i]
        })
        let now = this.state.blogs[i];
        this.formRef.current.setFieldsValue({
            title: now.title,
            is_enable: now.is_enable.data[0]
        })
        this.setValue(now.detail)
    }

    onFinish = (values) => {
        let data = {
            detail: this.state.value,
            ...values
        }
        global.$.post({
            url: 'admin/blog/add',
            data
        })
    };

    onFinishFailed(errorInfo) {
        console.log('Failed:', errorInfo);
    };

    render() {
        return (
            <div className="add-container">
                <MDEditor
                    height={400}
                    value={this.state.value}
                    onChange={this.setValue}
                />
                <div className="main">
                    <Form
                        {...layout}
                        ref={this.formRef}
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="标题"
                            name="title"
                            initialValue={this.state.now.title}
                            rules={[{ required: true, message: '请输入标题' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item name="is_enable" label="是否启用" valuePropName="checked">
                            <Switch />
                        </Form.Item>


                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                {/* <MDEditor.Markdown source={value} /> */}
            </div>
        );
    }
}
